<template>
  <div class="contioner">
    <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
      <a-form size="small" :model="query" layout="inline">
        <a-form-item label="保养人" prop="beginDate">
          <a-input v-model="query.beginDate" :style="{ width: '180px' }" class="bacClass" />
        </a-form-item>
      </a-form>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
        </a-space>
      </div>
    </div>
    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>

    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div :style="{ height: '90.5%', padding: '10px' }">
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: calc(100% - 45px)"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="tableDataList"
        :columnDefs="tc"
        :localeText="localeText1"
      >
      </AgGridVuesCopys>
      <paginationCopys
        :page-size-options="pagingList1"
        :total="fySelet.total"
        show-total
        show-jumper
        show-page-size
        @change="PageSize"
        @page-size-change="change"
        style="justify-content: center"
        :page-size="fySelet.size"
        :current="fySelet.page"
      />
    </div>
  </div>
  <el-dialog
    title="详情"
    v-model="isShowDetailDialog"
    @close="isShowDetailDialog = false"
    :close-on-click-modal="false"
    top="30vh"
    width="700"
    center
  >
    <!-- <div class="detail-container">
      <div class="tag-row" v-for="(tag, index) in tagList" :key="index">
        <el-tag>{{ tag }}</el-tag>
      </div>
    </div> -->
    <div class="w-full" style="height: 300px; overflow: auto">
      <encapsulation-agrid ref="table1Ref" :configaggrid="configaggrid"></encapsulation-agrid>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
  
  import { Message } from '@arco-design/web-vue'
  import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
  // 引入element提示
  //引入封装post
  import { post } from '@/api/http'
  import { Search, EditPen } from '@element-plus/icons-vue'
  import dayjs from 'dayjs'
  import { pagingList } from '@/api/paging'
  import { localeText } from '@/api/aggridZw'
  import ButtionRender1 from '@/components/aggridCellRenDerer/buttionRender1.vue'
  import emitter from '@/hooks/useEventBus'
  const pagingList1: any = ref(pagingList)
  const headerShow = ref<boolean>(true)
  const localeText1: any = ref(localeText)
  const table1Ref = ref<any>(null)
  const tc2 = [
    {
      headerName: '保养项目名称',
      field: 'upkeepName',
      width: 150,
    },
    {
      headerName: '状态',
      field: 'qualifiedState',
      width: 150,
      valueFormatter: (params: any) => {
        return params.value == 0 ? '不合格' : params.value == 1 ? '合格' : ''
      },
      cellStyle: (params: any) => {
        if (params.value == 0) return { color: 'red' }
        if (params.value == 1) return { color: 'green' }
      },
    },
  ]
  let configaggrid = ref({
    url: '', //接口路径
    queryData: {
      //接口参数
    },
    paginationShow: false, //分页是否显示
    invokeiIterface: false, //是否调用接
    rowMultiSelectWithClick: true, //点击行是否多选
    column: tc2,
    fileName: 'MaintenanceRecord-1',
  })
  interface Querin {
    beginDate: any
  }
  //getlist初始化接口参数
  let query = reactive<Querin>({
    beginDate: '',
  })

  const fySelet: any = reactive({
    total: 10,
    size: 10,
    page: 1,
  })

  const PageSize = (val: any) => {
    fySelet.page = val
    selectJt()
  }

  const change = (val: any) => {
    fySelet.size = val
    selectJt()
  }

  const tableDataList: any = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
  }

  const tc = [
    {
      headerName: '公司',
      field: 'companyName',
      width: 150,
    },
    {
      headerName: '保养人',
      field: 'staff',
      width: 150,
    },
    {
      headerName: '保养模板',
      field: 'maintainName',
      width: 150,
    },
    {
      headerName: '机台',
      field: 'machine',
      width: 150,
    },
    {
      headerName: '设备编号',
      field: 'machineCode', //
      width: 150,
    },
    {
      headerName: '机台类型',
      field: 'machineType', //
      width: 150,
    },
    // {
    //   headerName: '保养开始时间',
    //   field: 'startMaintainTime', //
    //   width: 150,
    // },
    // {
    //   headerName: '保养结束时间',
    //   field: 'endMaintainTime', //
    //   width: 150,
    // },
    {
      headerName: '保养时间',
      field: 'timeType',
      width: 150,
    },
    // {
    //   headerName: '回馈说明',
    //   field: 'illustrate',
    //   width: 150,
    // },
    // {
    //   headerName: '备注',
    //   field: 'remark',
    //   width: 150,
    // },
    {
      headerName: '操作',
      field: 'action',
      width: 150,
      pinned: 'right',
      cellRenderer: ButtionRender1,
      cellRendererParams: {
        buttonList: [
          {
            type: 'primary',
            text: '详情',
            typeName: 'el-button',
            show: true,
            Callback: (data: any) => {
              return {
                rowData: data,
                emitString: 'MaintenanceRecord-detailHandle',
              }
            },
          },
        ],
        eltagSize: 0,
      },
    },
  ]
  onMounted(() => {
    emitter.on('MaintenanceRecord-detailHandle', (data: any) => editHandler(data))
  })
  onUnmounted(() => {
    emitter.off('MaintenanceRecord-detailHandle', (data: any) => editHandler(data))
  })
  const isShowDetailDialog = ref(false)
  const tagList = ref([])
  const editHandler = async (data: any) => {
    try {
      const { id } = data
      const res = await post({
        url: 'zcTemRepair/maintainDocument/selectInfoById',
        data: {
          // machineCode: machineCode,
          // keepTemplateName: maintainName,
          infoId: id,
        },
      })
      if (res.code == 200) {
        isShowDetailDialog.value = true
        nextTick(() => {
          table1Ref?.value.setdataListIterface(res.data.info)
          table1Ref?.value.autoSizeAll()
        })
      } else {
        Message.error(res.message)
      }
    } catch (e) {
      console.log(e)
    }
  }
  function selectJt() {
    post({
      url: 'zcTemRepair/maintainDocument/recordMaintainDocument',
      data: {
        staff: query.beginDate,
        page: fySelet.page,
        limit: fySelet.size,
      },
    }).then((res: any) => {
      if (res.code == 200) {
        tableDataList.value = res.data.list
        fySelet.total = res.data.total
      } else {
        Message.error(res.message)
      }
    })
  }

  const getList = () => {
    selectJt()
  }
</script>
<style scoped>
  .contioner {
    height: 100%;
    background: #fff;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
  .detail-container {
    display: flex;
    flex-wrap: wrap;
  }

  .tag-row {
    display: flex;
    justify-content: space-between;
    width: 50%; /* 确保每行占满整个容器的宽度 */
    margin-bottom: 10px; /* 设置标签行与行之间的间距 */
  }
</style>
